import React from 'react'
import indexStyle from '../index.less'
import { Image, Space, Typography } from 'antd'
import { articleList } from '../public/common'
import { DislikeOutlined, LikeOutlined } from '@ant-design/icons'

const { Text } = Typography

class ArticleTitleModule extends React.PureComponent {

  render () {
    return (
      <div>
        {
          articleList.map(item => {
            return <div className={indexStyle.articleTagStyle} key={item.id}>
              <div style={{ width: '10%', height: '101px' }} className={indexStyle.imageStyle}>
                <Image src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" preview={false} width={176} height={101}/>
              </div>
              <div className={indexStyle.articleStyle}>
                <Text style={{ fontSize: '20px', fontWeight: '500' }} className={'articleTitle'}>{item.title}</Text>
                <div style={{ height: '41px', overflow: 'hidden' }}>{item.introduction}</div>
                <div className={indexStyle.articleBottom}>
                  <Space size={'large'}>
                    <a><Space size={3}><LikeOutlined/>{item.support}赞</Space></a>
                    <a><Space size={3}><DislikeOutlined/>踩</Space></a>
                    <a><Space size={3}>作者:{item.author}</Space></a>
                  </Space>
                </div>
              </div>
            </div>
          })
        }
      </div>
    )
  }
}

export default ArticleTitleModule
